<template>
	<view class="" v-if="!flag" style="padding-top: 100px;padding-left: 20rpx;" @click="copy">
		{{oaid}}

		<button class="btn">点击复制</button>
	</view>
	<view class="content" v-else="flag">
		<view v-for="(item,index) in params" class="start">
			<view class="title">
				{{item.title}}
			</view>

			<view class="flex">
				<view v-for="(items,indexs) in type" class="_flex name">
					{{items}}
				</view>
			</view>
			<view class="flex">
				<view class="input" v-for="(item2,index2) in item.num">
					<input type="number" v-model="item2.num" />
				</view>
			</view>
		</view>

		<button type="button" class="btn" @click="sum">输出结果</button>
		<view class="end" v-if="status == 1">
			<view v-for="(item,index) in end" class="end">
				<view class="title">
					{{item.title}}
				</view>

				<view class="flex">
					<view v-for="(items,indexs) in type" class="_flex name">
						{{items}}
					</view>
				</view>
				<view class="flex">
					<!-- :class="item2.num<0?'red':''" -->
					<view class="input" v-for="(item2,index2) in item.num">
						<input type="number" disabled :value="item2.num" :class="item2.num<0?'red':''" />
					</view>
				</view>
			</view>

			<button type="button" class="btn" @click="toUrl">查看配船</button>
		</view>
	</view>
</template>
<script>
	import {
		dataList
	} from '@/static/mazeJson.js'


	export default {
		data() {
			return {
				type: [
					'火力', '装甲', '机动', '幸运'
				],

				params: {
					initial: {
						title: '初始四维',
						num: [{
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}]
					},
					airship: {
						title: '飞艇四维',
						num: [{
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}]
					},
					weight: {
						title: '分配权重',
						num: [{
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}]
					},
				},
				end: {
					now: {
						title: '最终四维',
						num: [{
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}]
					},
					difference: {
						title: '四维差值',
						num: [{
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}, {
							num: 0
						}]
					}
				},
				status: 0,
				oaid: '',
				flag: false,
			}
		},
		onShow() {
			let that = this;
			let a = uni.getSystemInfoSync()
			console.log(a.oaid);
			this.oaid = a.oaid

			var flag = uni.getStorageSync('flag')
			this.flag = flag

			let params = uni.getStorageSync('params')
			if (params) {
				this.params = JSON.parse(params)
			}

			// #ifdef H5
			flag = true
			this.flag = true
			// #endif
			if (!flag) {
				console.log(12);
				uni.request({
					url: 'https://ymn-1322089291.cos.ap-chengdu.myqcloud.com/change/num.json',
					success(res) {
						console.log(that.oaid);
						let num = res.data.split(',')
						num.map(v => {
							if (v == that.oaid) {
								uni.setStorageSync('flag', true)
								that.flag = true
							}
						})

					}
				})
			}

		},
		onLoad() {},
		methods: {
			sum() {
				const data = dataList;
				const A = data.map((row) => row.A);
				const B = data.map((row) => row.B);
				const C = data.map((row) => row.C);
				const D = data.map((row) => row.D);
				const E = data.map((row) => row.id);
				const S = data.map((row) => row.S);
				const N = 39;
				const base = new Array(data.length).fill(0);
				let list = [];
				const ini = this.params.initial.num
				const ini_f = this.params.airship.num
				// ABCD分别代表火甲机幸，在这里调权重

				for (let i = 0; i < data.length; i++) {
					base[i] = {
						num: A[i] * this.params.weight.num[0].num + B[i] * this.params.weight.num[1].num + C[i] * this
							.params
							.weight.num[2].num + D[i] * this.params.weight.num[3].num,
						id: E[i]
					};
				}
				const order = base.slice().sort((a, b) => b.num - a.num);


				for (let i = 0; i < N; i++) {
					list.push(order[i]);
				}




				const Asum = list.reduce((acc, curr) => acc + A[curr.id - 1], 0);
				const Bsum = list.reduce((acc, curr) => acc + B[curr.id - 1], 0);
				const Csum = list.reduce((acc, curr) => acc + C[curr.id - 1], 0);
				const Dsum = list.reduce((acc, curr) => acc + D[curr.id - 1], 0);
				const Ssum = list.reduce((acc, curr) => acc + S[curr.id - 1], 0);
				// this.end.now.num = [Asum, Bsum, Csum, Dsum]
				this.end.now.num = [{
						num: Number(Asum) - Number(ini_f[0].num) + Number(ini[0].num),
					},
					{
						num: Number(Bsum) - Number(ini_f[1].num) + Number(ini[1].num),
					},
					{
						num: Number(Csum) - Number(ini_f[2].num) + Number(ini[2].num),
					},
					{
						num: Number(Dsum) - Number(ini_f[3].num) + Number(ini[3].num),
					},
				]


				this.end.difference.num = [{
						num: Asum - ini_f[0].num
					},
					{
						num: Bsum - ini_f[1].num
					},
					{
						num: Csum - ini_f[2].num
					},
					{
						num: Dsum - ini_f[3].num
					},
				]


				list = list.map((x) => dataList[x.id - 1]);
				// console.log(list);

				uni.setStorageSync('airship', JSON.stringify(list))
				uni.setStorageSync('params', JSON.stringify(this.params))

				let flag = true;
				if (flag) {
					this.status = 1
				}
			},

			toUrl() {
				uni.navigateTo({
					url: '/pages/airship/airship'
				})
			},
			copy() {
				let that = this;
				uni.setClipboardData({
					data: this.oaid,
					success() {
						uni.showToast({
							title: '复制成功'
						})
					}
				})

			}
		},

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: url(@/static/bg1.png) no-repeat top;
		min-height: 100vh;
		max-height: 100vh;
		box-sizing: border-box;
		padding-top: 50px;
	}

	.content>view {
		width: 100%;
		text-align: center;
	}

	.title {
		font-size: 1.5em;
		margin: 30rpx 0 10px;
	}

	.name {
		font-size: .8em;
		margin: 10rpx;
	}

	.input {
		/* border: 1rpx solid #ddd; */
		margin: 0 20rpx;
		color: #444;
	}

	.start .input {
		background-color: rgb(255, 161, 70);
	}


	.btn {
		background: green;
		color: #fff;
		margin-top: 30px;
		margin-bottom: 30px;
		width: 50%;
	}

	.end input {
		background-color: rgb(178, 228, 253);
	}

	.end .red {
		color: red !important;

	}

	.end .btn {
		background: rgb(252, 69, 79);
		color: #fff;
		width: 50%;
	}
</style>